<template>
  <div class="hiHome">
    <img src="../assets//img/bgc.jpg" alt="" class="backGroundImg" />
    <div class="bigBox">
      <div class="topBox">
        <div class="leftBox">
          <div class="history" @click="goHistoryRulst">历史战绩</div>
          <img :src="historyImg" alt="" class="img1" />
        </div>
        <div class="rightBox">
          <img :src="myImg" alt="" class="img2" />
          <div class="my" @click="goSelf">我的</div>
        </div>
      </div>

      <div class="topBox2">
        <div class="lBox dflex" @click="(showModal = true), SignInButton()">
          <div class="sign">签到</div>
          <img :src="signImg" alt="" class="img3" />
        </div>
        <div class="rbox">
          <img :src="ruleImg" alt="" class="img4" />
          <router-link to="Act_Rules" class="act">活动规则</router-link>
        </div>
      </div>
    </div>
    <div class="poolBBVal w ta m0 fz16">当前奖金池 {{ poolBBVal }} 呗币</div>
    <div class="popMaskBox">
      <div class="mask" v-if="showModal"></div>
      <div class="pop" v-if="showModal">
        <div @click="showModal = false" class="btn fr">
          <img :src="closeImg" alt="" class="wh" />
        </div>
        <div class="fz mt20" style="margin-left: 3.4666667vw" v-if="signList.signInAwards.length > 0">
          连续签到 7 天奖励多多,已签到
          <div style="color: #9a59d0" class="dl fw">{{ signList.signTimes }}</div>
          天
        </div>
        <div class="signBox">
          <div class="oneRoundBox" v-for="(item, index) in signList.signInAwards" :key="index">
            <div class="pr bbBox">
              <div :class="Number(item.day) <= signList.signTimes ? 'linePadding' : 'line'" v-if="index != 3 && index != 6"></div>
              <div class="roundBox">
                <div :class="Number(item.day) <= signList.signTimes ? 'roundPadding' : 'round'">
                  <div style="margin: 10px">
                    <img :src="bbImg" alt="" style="width: 100%; height: 100%" />
                  </div>
                </div>
              </div>
            </div>
            <div style="font-size: 14px; padding: 10px 0; width: 70%">
              <div :class="Number(item.day) <= signList.signTimes ? 'bbColorPadding' : 'bbColor'">{{ item.beibiQuantity }}呗币</div>
              <div :class="Number(item.day) <= signList.signTimes ? 'bbColorPadding' : 'bbColor'">第{{ item.day }}天</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="centerBox m0">
      <div class="centerTopBox">
        <div class="indexesBox ai">
          <img :src="fireImg" alt="" class="fire dl" />
          <div class="dl fz mr15 w">
            {{ getChartFormInfo.date }}
            <span class="msg">{{ msg }}</span>
          </div>
          <div>
            <span :class="[increaseStyle >= 0 ? 'rise' : 'fall']" class="indexesNum dl fz"> {{ getChartFormInfo.prize }}</span>
            <span :class="[increaseStyle >= 0 ? 'rise' : 'fall']" class="indexesNum dl fz"> {{ increase }}</span>
          </div>
          <router-link to="Market_details" class="details dl fz">大盘详情</router-link>
          <img :src="rightImg" alt="" class="fire1 dl" />
        </div>

        <!-- 1丶看涨,看跌面板-->
        <!--注:
                1丶初始化数据时,用户未点击guessStatus==0时候
                2丶只要guessStatus==0必须显示涨和跌面板
                -->
        <div v-if="showUpDown" style="position: relative">
          <div class="upDown">
            <img :src="downImg" alt="" class="down dl" />
            <img :src="upImg" alt="" class="up dl" />
            <div class="toUpDownBtn">
              <div class="toUp" @click="changeUpDownStatus(1, $event)">
                <div class="imgBox">
                  <img :src="seeUpImg" alt="" class="upBtnImg" />
                  <div class="upFont fz12 ta">看涨</div>
                </div>
              </div>
              <div class="toDown" @click="changeUpDownStatus(0, $event)">
                <div class="imgBox">
                  <img :src="seeDownImg" alt="" class="downBtnImg" />
                  <div class="downFont fz12 ta">看跌</div>
                </div>
              </div>
            </div>
          </div>
          <div class="van_progress dfj mt30">
            <van-progress :percentage="percentage" stroke-width="20" :fall="fall" color="#3EDFB9" track-color="#F3871A" />
            <span class="grogress_right fz10">{{ percentageRight }}%</span>
          </div>
          <div v-show="showUpDown" class="ta upDown-explain fz12">用户对每个交易日涨跌仅可预约一次,每次可投币 100 呗币</div>
        </div>

        <!-- 2丶已预言，待揭晓 -->
        <!--注:
           1丶用户已经点击,guessStatus==1,必须满足
           2丶用户今日15点后
           -->
        <div v-cloak v-if="showCutOff == true">
          <div class="van_progress dfj mt30">
            <van-progress :percentage="percentage" stroke-width="20" :fall="fall" color="#3EDFB9" track-color="#F3871A" />
            <span class="grogress_right fz10">{{ percentageRight }}%</span>
          </div>
          <div class="wenzi fz w ta">
            <div class="mb3">
              您已预言
              <span style="color: #f3871a">{{ upDownVal }}</span>
            </div>
            <div>
              预计 <span class="red fw"> {{ guessTime }} </span>可揭晓结果
            </div>
          </div>
        </div>

        <!-- 3丶今天交易日可查看结果 -->
        <!--注:
                  1丶用户已经点击,guessStatus==1,必须满足
                  2丶用户必须在13- 15点内点击才会有效
                  -->
        <div v-cloak v-if="showOver == true" style="margin-bottom: 10px">
          <div class="van_progress dfj mt30">
            <van-progress :percentage="percentage" stroke-width="20" :fall="fall" color="#3EDFB9" track-color="#F3871A" />
            <span class="grogress_right fz10">{{ percentageRight }}%</span>
          </div>
          <div class="fz w ta" style="width：100%;">
            <div class="mb3">
              今日竞猜<span class="red fw"> {{ stopTime }} </span>后截止
            </div>
            <div>
              <span class="red fw"> {{ nextTime }} </span>可竞猜下一个交易日涨跌
            </div>
          </div>
        </div>
      </div>
      <div v-show="!showUpDown" class="ta explain fz12">用户对每个交易日涨跌仅可预约一次,每次可投币 100 呗币</div>

      <!-- 奖品池 -->
      <div class="centerMiddleBox">
        <div class="indexesBox1 spacebetween">
          <div class="dl">
            <img :src="jiangPinImg" alt="" class="jiang dl mb8" />
            <div class="jiang1 fz18 dl w">奖品池</div>
          </div>
          <div @click="goPrize_pool">
            <div class="dl w fz">查看更多</div>
            <img :src="rightImg" alt="" class="youjiantou dl mb5" />
          </div>
        </div>

        <div class="giftBox m0 sr">
          <div class="sbox p8" v-for="item in paddingMarketsGoodsList" :key="item.index">
            <div class="smallTopBox mt2">
              <img :src="item.listThumbnailImage" style="width: 22.6667vw; height: 14.13vw" />
            </div>
            <div class="fonT fz10 ta mt10">{{ item.productName }}</div>
            <div class="ta mt3 mb3">
              <span class="r fw fz mr5">￥ {{ item.salePrice }}</span>
              <span class="gray td fz12">￥ {{ item.marketPrice }}</span>
            </div>
            <div class="zhekou fz8 ta mb8">{{ getShopping }}</div>
            <div class="sButton m0 mt5 fz8 ta">
              <router-link to="Prize_pool">立即购买 </router-link>
            </div>
          </div>
        </div>
      </div>

      <div class="centerBottomBox">
        <div class="indexesBox1 spacebetween">
          <div class="dl">
            <img :src="paiMingImg" alt="" class="jiang dl mb7" />
            <div class="jiang1 fz18 dl w">我的排名</div>
          </div>
          <div>
            <div class="dl w fz" @click="goRanking">排行榜</div>
            <img :src="rightImg" alt="" class="youjiantou dl mb3" />
          </div>
        </div>
        <div class="yBox w fz sr ta" @click="toMyRecord">
          <div>
            <div class="ta">{{ myRecordList.accumulatedGuessBatchNo }}</div>
            <div class="mt20">预测次数</div>
          </div>
          <div>
            <div class="ta">{{ myRecordList.accumulatedGuessWinning }}</div>
            <div class="mt20">猜对次数</div>
          </div>
          <div>
            <div class="ta">{{ myRecordList.winRate }} %</div>
            <div class="mt20">胜率</div>
          </div>
          <div>
            <div class="ta">{{ bbValue }} 呗币</div>
            <div class="mt20">已赚</div>
          </div>
        </div>
      </div>
    </div>
    <div class="text ta fz">市场有风险，投资需谨慎</div>
  </div>
</template>

<script>
import { Toast, Progress } from "vant";
import { getAllToken, setAllToken } from "@/utils/auth";
import { isWechat } from "@/utils/index";
import { getShareInfo } from "@/utils/share.js";
import { someDaySomeTime, dateFormat } from "@/utils/formDate.js";
import { wechatAuth, memberInfo, topCharts, getMarkets, GuessUpAnDown, GuessUpAnDownWhether, SignIn, Market, getChartInfo, personRecord, Prize_Pool, upDown } from "../api/index.js";

export default {
  name: "Home",
  inject: ["reload"], //注入刷新
  components: {
    [Toast.name]: Toast,
    [Progress.name]: Progress,
  },
  data() {
    return {
      historyImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/hresult.png",
      myImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/me.png",
      signImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/qiandao.png",
      ruleImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/qiandao.png",
      closeImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/close.png",
      bbImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/bb.png",
      fireImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/fire.png",
      rightImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/right.png",
      downImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/down.png",
      upImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/up.png",
      seeUpImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/up1.png",
      seeDownImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/down1.png",
      jiangPinImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/jiangping.png",
      paiMingImg: "https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/paiming.png",
      percentage: "50", //进度条 %百分比
      percentageRight: "50",
      fall: 30,
      msg: "上证指数",
      closeNumbers: 0,
      tradingDay: 20201028,
      indexesList: [],
      increase: "",
      showUpDown: true,
      showCutOff: false,
      stopTime: "13:00",
      nextTime: "15:15",
      getShopping: "100呗币抵扣1元",
      showModal: false, //默认不显示遮罩层
      isSignIn: false, //没有签到显示今日未签到，已签到显示 inSignIn 天，
      times: 0, //倍数
      signList: {
        signInAwards: [],
        signTimes: 0,
      },
      paddingMarketsGoodsList: [],
      howMoneyList: "", //每次奖励的呗币合集, 默认0
      bbValue: 0,
      bbUser: 0,
      poolBBVal: 0,
      myRecordList: {
        //首页记录我的预测胜率，次数
        accumulatedGuessBatchNo: 0,
        accumulatedGuessWinning: 0,
        winRate: 0,
      },
      guessTime: "15:15", //预计时间揭晓结果
      isStopTime: false,
      winNum: 0, //猜成功的次数
      day: 0,
      upDownVal: "",
      getChartFormInfo: {}, //大盘每分钟数据
      timer: "",
      nowTime: dateFormat(new Date(), "hh:mm:ss"), //当前时间
      thirteenTime: "13:00:00", //十三点
      fifteenTime: "15:15:00", //十五点
      increaseStyle: 0, //上证指数正或者负
      showOver: false,
    };
  },
  created() {
    // console.log(this.$route.query)
    this.reload(); // 返回的时候刷新页面

    this.isPhone = !isWechat() ? "2" : "3";

    if (this.$store.state.user.memberNo || getAllToken("memberNo")) {
      this.memberNo = this.$store.state.user.memberNo || getAllToken("memberNo");
      this.getGuessUpAnDownWhether(); //判断用户是否竞猜过
      this.getMemberInfo();
    }

    if (!sessionStorage.getItem("openid")) {
      this.isWechats();
    }
    this.goGetChartInfo();
    this.getPerent();
  },
  mounted() {
    if (this.$store.state.user.memberNo || getAllToken("memberNo")) {
      this.getTopRecordList();
    }
    this.MarketsIndexGoods();

    this.getToolBBVal(); //奖金池总bb量

    this.timer = setInterval(() => {
      this.goGetChartInfo();
    }, 6000);
  },
  methods: {
    isWechats() {
      // 判断是否是微信环境
      let ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf("micromessenger") > -1) {
        let url = window.location.href;
        if (this.$route.query.openid) {
          sessionStorage.setItem("openid", this.$route.query.openid);
          // console.log("openid：", openid)
          getShareInfo();
        } else {
          this.getOppenId();
        }
      } else {
        window.sessionStorage.setItem("openid", "");
      }
    },
    getOppenId() {
      // 获取openid
      let urlStr = location.href;
      if (urlStr.indexOf("?") != -1) {
        if (urlStr.split("?").length > 2) {
          urlStr = urlStr.split("?")[0] + "#/goods/detail";
        } else {
          urlStr = urlStr.split("?")[0];
        }
      }
      let para = {
        appId: "1", //商户id string @mock = 1
        param: this.$route.query.productNo,
        redirectUri: urlStr, //(M) 重定向地址 string @mock = http: //www.baidu.com
        serviceName: "WX.AUTH.JB", //(M) 服务名称 string @mock = WX.AUTH.JL
        userId: 10001, // (M) 用户id string @mock = 1
      };
      // alert(urlStr)
      wechatAuth(para)
        .then((res) => {
          window.location.href = res.data.content;
        })
        .catch((err) => {
          // alert(JSON.stringify(err))
        });
    },
    loginIn() {
      //登录
      this.$router.push("/login");
    },

    getMemberInfo() {
      // 获取用户信息
      let para1 = {
        memberNo: this.memberNo, //类型：String  必有字段
      };
      memberInfo(para1).then((res) => {
        console.log("会员编号memberNo=====>", res);
        if (res.data.code == "000") {
          this.infoForm = res.data.content;
          // console.log("会员编号memberNo=====>", res, this.infoForm)
          this.bbUser = res.data.content.memberBeibiBalance;
        } else {
          Toast("网络异常，稍后重试");
        }
      });
    },
    goHistoryRulst() {
      //去历史战绩
      if (this.$store.state.user.memberNo || getAllToken("memberNo")) {
        let a = this.$store.state.user.memberNo;
        let b = getAllToken("memberNo");
        // console.log(a, b)
        this.$router.push({
          path: "/History_Result",
          name: "History_Result",
        });
      } else {
        this.loginIn();
      }
    },
    goSelf() {
      //去我的页面
      if (this.$store.state.user.memberNo || getAllToken("memberNo")) {
        this.$router.push({
          path: "/self/Self",
          name: "Self",
        });
      } else {
        this.loginIn();
      }
    },
    goRanking() {
      //去排行榜
      // console.log("去排行榜")
      this.$router.push({
        path: "/Ranking",
        name: "Ranking",
      });
    },
    toMyRecord() {
      //去我的战绩页面
      if (this.$store.state.user.memberNo || getAllToken("memberNo")) {
        this.$router.push({
          path: "/My_record",
          name: "My_record",
        });
      } else {
        this.loginIn();
      }
    },
    goPrize_pool() {
      //去奖品池
      this.$router.push({
        path: "/Prize_pool",
        name: "Prize_pool",
      });
    },
    SignInButton() {
      // 签到
      if (this.$store.state.user.memberNo || getAllToken("memberNo")) {
        let para = {
          //类型：Object  必有字段  备注：无
          memberNo: this.memberNo,
        };
        SignIn(para).then((res) => {
          if (res.data.code == "000") {
            this.signList = res.data.content;
            let signTime = res.data.content.signTimes;
            if (res.data.content.todaySigned == false) {
              return Toast("签到成功");
            } else {
              return Toast("今日已签到");
            }
          } else {
            Toast(`${res.data.desc}`);
          }
        });
      } else {
        this.loginIn();
        // eslint-disable-next-line no-undef
        Toast("请登录再签到");
      }
    },
    goGetChartInfo() {
      //大盘每分钟信息
      getChartInfo().then((res) => {
        if (res.data.code == "000") {
          // console.log(res.data)
          let data = res.data.content;
          this.getChartFormInfo = data[data.length - 1];
        }
      });
    },
    MarketsIndexGoods() {
      //获取首页商品三个数据
      getMarkets()
        .then((res) => {
          if (res.data.code == "000") {
            this.paddingMarketsGoodsList = res.data.content;
          }
        })
        .catch((err) => {});
    },

    //两个时间比大小
    CompareDate(t1, t2) {
      var date = new Date();
      var a = t1.split(":");
      var b = t2.split(":");
      if (date.setHours(a[0], a[1]) > date.setHours(b[0], b[1])) {
        return true;
      } else {
        return false;
      }
      // return date.setHours(a[0], a[1]) > date.setHours(b[0], b[1]);
    },

    // 判断用户是否竞猜过
    getGuessUpAnDownWhether() {
      this.showUpDown = false; //涨跌面板
      this.showCutOff = false; //截止面板
      this.showOver = false;
      GuessUpAnDownWhether({
        memberNo: this.memberNo,
      }).then((res) => {
        if (res.data.code == "000") {
          //当前时间不能竞猜
          let data = res.data.content;
          if (data.guessStatus == "0") {
            if (this.nowTime > this.thirteenTime && this.nowTime < this.fifteenTime) {
              this.showUpDown = false; //涨跌面板
              this.showCutOff = false; //截止面板
              this.showOver = true; //截止面板
            } else {
              this.showUpDown = true; //涨跌面板
              this.showCutOff = false; //截止面板
              this.showOver = false; //截止面板
            }
          } else {
            console.log("11111");
            //关闭涨跌面板
            this.showUpDown = false;
            this.showCutOff = true;
            this.showOver = false;
            this.upDownVal = data.myResult == "0" ? "跌" : "涨";
            // if (this.nowTime > this.thirteenTime) {
            //     //揭晓(第二天)
            //     console.log('正确时间点击,可以看预测涨/跌,提示15点揭晓结果')
            //     this.showCutOff = false
            //     this.upDownVal = data.myResult == "0" ? '跌' : '涨'
            // } else if (this.nowTime < this.thirteenTime) {
            //     //今天就可以揭晓
            //     console.log('11111')
            //     this.showCutOff = true
            // }
          }
        }
      });
    },

    //用户看涨或者看跌
    changeUpDownStatus(upDownVal, e) {
      // 预测涨跌
      if (this.$store.state.user.memberNo || getAllToken("memberNo")) {
        //点击时间在13点前  钱点后
        if (this.nowTime > this.fifteenTime || this.nowTime < this.thirteenTime) {
          let para = {
            memberNo: this.memberNo, //类型：String  必有字段  备注：会员编号
            status: upDownVal, //类型：String  必有字段  备注：下注状态 0跌 1涨
            CHANNEL_NO: "1fa72678b069024789d5f555b0ad70f7", //渠道编号
          };
          GuessUpAnDown(para).then((res) => {
            if (res.data.code == "000" && this.bbUser && this.bbUser >= 100) {
              this.getPerent();
              this.getToolBBVal();
              this.getGuessUpAnDownWhether();
              Toast(`${res.data.desc}`);
            } else if (res.data.code == "000" && this.bbUser < 100) {
              return Toast(`呗币不足无法竞猜`);
            } else {
              return Toast(`${res.data.desc}`);
            }
          });
        }
        //13-15之间
        if (this.nowTime > this.thirteenTime && this.nowTime < this.fifteenTime) {
          this.showUpDown = false;
          this.showCutOff = false;
          this.showCutOff = true;
          this.getPerent();
        }
      } else {
        this.loginIn();
      }
    },

    //涨跌概率比(用户点击涨跌后需要触发的操作)
    getPerent() {
      //涨跌概率比
      //  console.log('aaaaaaaaaa')
      let para = {
        channelNo: "1fa72678b069024789d5f555b0ad70f7",
      };
      upDown(para).then((res) => {
        if (res.data.code == "000") {
          this.percentage = res.data.content.upPercentage;
          this.percentageRight = res.data.content.downPercentage;
        }
      });
    },

    getTopRecordList() {
      // 首页底部预测次数胜率
      let para = {
        memberNo: this.$store.state.user.memberNo || getAllToken("memberNo"), //类型：String  必有字段
      };
      personRecord(para)
        .then((res) => {
          if (res.data.code == "000") {
            this.myRecordList = res.data.content;
          } else {
            Toast(`${res.data.desc}`);
          }
        })
        .catch((err) => console.log(err));

      topCharts(para).then((res) => {
        //已赚到的呗币量
        if (res.data.code == "000") {
          this.bbValue = res.data.content.mineRecord.earnings;
        }
      });
    },

    toPoint(percent) {
      var str = percent.replace("%", "");
      str = str / 100;
      return str;
    },

    getToolBBVal() {
      // 奖金池总呗币值
      // 奖批次
      Market().then((res) => {
        if (res.data.code == "000") {
          this.increase = res.data.content.increase;
          if (this.increase) {
            this.increaseStyle = this.toPoint(this.increase);
          }
          let guessBatchNo = res.data.content.tradingDay;
          let para = {
            guessBatchNo: guessBatchNo,
          };
          Prize_Pool(para).then((res) => {
            if (res.data.code == "000") {
              this.poolBBVal = res.data.content.awardAmount;
            } else {
              this.poolBBVal = 0;
            }
          });
        }
      });
    },
  },

  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="less" scoped>
.hiHome {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: rgb(10, 0, 62);
  overflow-y: scroll;
}

.backGroundImg {
  position: relative;
  margin-top: -9px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  z-index: -1;
  margin-bottom: -66.333333vw;

  .clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    clear: both;
    visibility: hidden;
  }
}

.bigBox {
  position: absolute;
  top: 3.5%;
  min-width: 100%;
  overflow-x: hidden;
  background-color: transparent;
  z-index: -1;

  .topBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .leftBox {
      width: 88px;
      height: 29px;
      background-color: rgb(83, 65, 152);
      border-radius: 0 15px 15px 0;
      border: 1px solid rgb(201, 140, 246);
      display: flex;
      justify-content: center;
      align-items: center;

      .img1 {
        width: 17px;
        height: 17px;
        margin-left: 5px;
      }

      .history {
        font-size: 14px;
        line-height: 29px;
        color: white;
        text-decoration: none;
      }
    }

    .rightBox {
      width: 75px;
      height: 41px;
      background-color: rgb(83, 65, 152);
      border-radius: 20px 0 0 20px;
      border: 1px solid rgb(201, 140, 246);
      display: flex;
      justify-content: center;
      align-items: center;

      .img2 {
        width: 22px;
        height: 24px;
        margin-left: 2px;
        margin-right: 5px;
      }

      .my {
        font-size: 17px;
        line-height: 41px;
        color: white;
        text-decoration: none;
      }
    }
  }

  .topBox2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;

    .sign_title {
      color: #4e4e4e;
      size: 12px;
    }

    .lBox {
      width: 63px;
      height: 29px;
      border-radius: 0 15px 15px 0;
      background-color: rgb(83, 65, 152);
      border: 1px solid rgb(201, 140, 246);

      .sign {
        font-size: 14px;
        line-height: 29px;
        color: white;
        text-decoration: none;
      }

      .img3 {
        width: 17px;
        height: 18px;
        margin-left: 3px;
      }
    }

    .rbox {
      width: 92px;
      height: 29px;
      background-color: rgb(83, 65, 152);
      border-radius: 15px 0 0 15px;
      border: 1px solid rgb(201, 140, 246);
      display: flex;
      justify-content: center;
      align-items: center;

      .img4 {
        width: 16px;
        height: 16px;
        margin-left: 2px;
        margin-right: 5px;
      }

      .act {
        font-size: 14px;
        line-height: 29px;
        color: white;
        text-decoration: none;
      }
    }
  }
}

.poolBBVal {
  width: 185px;
  height: 30px;
  background: linear-gradient(to right, rgb(255, 174, 21), rgb(255, 48, 2));
  border-radius: 15px;
  line-height: 30px;
  margin-bottom: 55.666667vw;
}

.centerBox {
  width: 95%;
  height: 800px;
  overflow-x: hidden;

  .centerTopBox {
    z-index: -1;
    background: linear-gradient(to right, rgb(131, 20, 205), rgb(96, 21, 217));
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 20px 0 20px 0;

    .indexesBox {
      display: flex;
      justify-content: space-between;
      padding: 0px 10px 0px 10px;

      &.ai {
        align-items: center;
      }

      .msg {
        margin-right: 5px;
      }

      .fire {
        width: 13px;
        height: 17px;
      }

      .indexes {
        color: #fff;
        position: relative;
        right: 1.133333vw;
      }

      .indexesNum {
        color: rgb(248, 43, 43);
        margin-right: 2.333333vw;
      }

      .details {
        color: rgb(65, 148, 229);
        margin-left: 5.333333vw;
      }

      .fire1 {
        width: 14px;
        height: 15px;
        margin-left: -5px;
        margin-top: 3px;
      }

      //动态类名
      .fall {
        color: rgb(62, 223, 185);
      }

      .rise {
        color: rgb(243, 135, 26);
      }
    }

    .upDown {
      position: relative;
      height: 120px;

      // margin-bottom: 41.266667vw;
      .toUpDownBtn {
        position: relative;

        .toUp {
          position: absolute;
          top: 10.733333vw;
          right: 15%;
          color: rgb(246, 141, 37);

          .imgBox {
            width: 88px;
            height: 41px;
            position: relative;

            .upFont {
              width: 88px;
              height: 41px;
              line-height: 41px;
              position: absolute;
              bottom: 3%;
            }
          }
        }

        .toDown {
          position: absolute;
          top: 19.733333vw;
          left: 15%;
          color: rgb(73, 224, 189);

          .imgBox {
            width: 88px;
            height: 41px;
            position: relative;

            .downFont {
              width: 88px;
              height: 41px;
              line-height: 41px;
              position: absolute;
              bottom: 3%;
            }
          }
        }
      }

      .up {
        width: 48%;
        height: 94px;
        position: absolute;
        top: 14px;
        left: 44%;
      }

      .down {
        width: 48%;
        height: 94px;
        position: absolute;
        top: 42px;
        left: 8%;
      }

      .seeDown {
        img {
          width: 91px;
          height: 39px;
          position: absolute;
          left: 10%;
          top: 450%;
        }
      }

      .seeUp {
        img {
          width: 91px;
          height: 39px;
          position: absolute;
          right: 12%;
          top: 250%;
        }
      }
    }

    .upDown-explain {
      width: 350px;
      height: 17px;
      margin: 0 auto;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 600;
      text-align: center;
      color: #f58617;
      line-height: 17px;
      letter-spacing: 0px;
    }

    .van_progress {
      position: relative;

      .van-progress {
        margin-top: 10px;
        width: 65%;
        margin-bottom: 5.666667vw;
        height: 20px !important;
      }

      .grogress_right {
        position: absolute;
        right: 20%;
        color: #fff;
        height: 16px;
        line-height: 3.266667vw;
        margin-top: 3.8vw;
      }
    }

    .explain {
      font-weight: 600;
      color: #f58617;
      padding: 0 10px 0 10px;
    }

    .progress {
      width: 65%;
      height: 15px;
      background-color: green;
      margin: 40px auto;
      border-radius: 8px;
    }

    .red {
      color: #f7282c;
    }
  }

  .explain {
    width: 100%;
    height: 17px;
    margin: 0 auto;
    margin-bottom: 21px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 600;
    color: #f58617;
    text-align: center;
    line-height: 17px;
    letter-spacing: 0px;
  }

  .centerMiddleBox {
    // height: 246px;
    background: linear-gradient(to right, rgb(131, 20, 205), rgb(96, 21, 217));
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 20px 10px 30px 10px;

    .indexesBox1 {
      .jiang {
        width: 17px;
        height: 17px;
        margin-right: 14px;
      }

      .youjiantou {
        width: 14px !important;
        height: 15px !important;
        margin-left: 5px;
      }
    }

    .giftBox {
      width: 95%;
      height: 150px;
      margin-top: 6.2%;

      .sbox {
        width: 30%;
        background-color: #fff;
        border-radius: 10px;

        .fonT {
          min-width: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .zhekou {
          min-width: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .smallTopBox {
          margin: -2px;
          width: 85px;
          height: 54px;
          // background-color: rgb(115, 21, 211);
          display: block;
        }

        .sButton {
          max-width: 50px;
          height: 16px;
          line-height: 16px;
          border-radius: 3px;
          background-color: rgb(248, 131, 14);
        }
      }
    }
  }

  .centerBottomBox {
    background: linear-gradient(to right, rgb(131, 20, 205), rgb(96, 21, 217));
    border-radius: 20px;
    padding: 20px 8px 25px 8px;
    overflow-x: hidden;

    .indexesBox1 {
      .jiang {
        width: 17px;
        height: 17px;
        margin-right: 14px;
      }

      .youjiantou {
        width: 14px !important;
        height: 15px !important;
        margin-left: 5px;
      }
    }

    .yBox {
      margin-top: 8%;
    }
  }
}

.text {
  color: #bebebe;
  font-size: 12px;
  margin-bottom: 20px;
}

//pop 弹出
// 遮罩层
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998 !important;
}

// 弹出层
.pop {
  background-color: #fff;
  position: fixed;
  top: 100px;
  width: 80%;
  z-index: 999 !important;
  margin: 0 auto;
  border-radius: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px 20px 30px 20px;

  .signBox {
    padding: 20px 0px 2px 19px;

    .oneRoundBox {
      float: left;
      width: 25%;
      background-color: #fff;

      .bbBox {
        .roundBox {
          .round {
            max-width: 45px;
            max-height: 45px;
            border: 6px solid #cfcdcd;
            border-radius: 50%;
            background-color: #fff;
            opacity: 0.95;
          }

          .roundPadding {
            max-width: 45px;
            max-height: 45px;
            border-radius: 50%;
            opacity: 0.95;
            border: 6px solid #9a59d0;
            color: #9a59d0;
            text-align: center;
          }
        }

        .line {
          width: 40%;
          height: 5px;
          background-color: #e1e1e1;
          position: absolute;
          top: 50%;
          left: 60%;
          transform: translateY(-50%);
        }

        .linePadding {
          width: 40%;
          height: 5px;
          background-color: #9a59d0;
          position: absolute;
          top: 50%;
          left: 64%;
          transform: translateY(-50%);
        }
      }

      .bbColor {
        font-size: 11px;
        color: #e1e1e1;
        text-align: center;
      }

      .bbColorPadding {
        font-size: 11px;
        color: #9a59d0;
        text-align: center;
      }
    }
  }
}
</style>
<style scoped>
/deep/ .van-progress__portion {
  height: 20px !important;
}

/deep/ .van_progress .van-progress__pivot {
  left: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}
</style>
